<template>
  <d2-container>
    
<template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-position="left" :inline="true"  @submit.native.prevent>

        <el-form-item label="商户号：" size="mini">
          <el-input placeholder="" v-model="mainQuery.mchNo" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>
        <el-form-item label="商户名称：" size="mini">
          <el-input placeholder="" v-model="mainQuery.mchName" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <el-form-item label="审核状态" size="mini">
          <el-select v-model="mainQuery.reviewStatus" filterable clearable @change="handleSearch">
            <el-option v-for="item in reviewStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>


      <div class="search-btn-box">
        <div class="left">
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>
    </template>

  
  <!--主列表数据-->
    <d2-crud ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :rowHandle="mainTable.rowHandle" :loading="mainTable.loading" 

      @current-change="onMainCurrentChange" 
      @custom-emit-approve="handleApprove"
      @custom-emit-reject="handleReject"

      ></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

  </d2-container>
</template>

<script>

import ApiMain from '@/api/mch.mailChangeApply';
import util from '@/libs/util.js';

export default {
  mixins: [
  ],
  components: {
  },
  data() {
    return {

      mainQueryRaw: {},
      mainQuery: {
        mchNo       : '',
        mchName     : '',
        reviewStatus: '',
      },

      mchTagIdOptions: [],

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          // {title: 'id', key: 'id', align: 'center', showOverflowTooltip: true},
          { title: '商户号', key: 'mchNo', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '商户名称', key: 'mchName', align: 'center', showOverflowTooltip: true },

          { title: '旧邮箱', key: 'oldEmail', align: 'left', showOverflowTooltip: true },
          { title: '新邮箱', key: 'newEmail', align: 'left', showOverflowTooltip: true },
          // { title: '备注', key: 'remark', align: 'left', showOverflowTooltip: true },

          { title: '审核状态', key: 'strReviewStatus', align: 'center', width: '120', showOverflowTooltip: true },
          { title: '审核时间', key: 'reviewTime', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '审核人', key: 'reviewBy', align: 'center', showOverflowTooltip: true },

          { title: '创建人', key: 'createBy', align: 'center', showOverflowTooltip: true },
          { title: '创建时间', key: 'createTime', align: 'center', width: '180', showOverflowTooltip: true },
        ],
        rowHandle: {
          width: '200',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              show: (index, row) => row.reviewStatus == 0,
              text: '驳回',
              plain: false,
              type: 'danger',
              size: 'mini',
              emit: 'custom-emit-reject',
              confirm: true,
            },
            {
              show: (index, row) => row.reviewStatus == 0,
              text: '通过',
              plain: false,
              type: 'primary',
              size: 'mini',
              emit: 'custom-emit-approve'
            },
          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
      },

    }
  },
  computed: {
    reviewStatusOptions () {
      return [
        { value: 0, label: '待审核' },
        { value: 1, label: '已通过' },
        { value: 2, label: '已驳回' },
      ];
    },
  },
  async mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    this.resetMainData();

  },
  beforeDestroy() {
  },
  methods: {
    renderMainData(re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      console.log(val, '分页')
      this.mainTable.pagination.currentPage = val;
      console.log(this.mainTable.pagination.page)
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
        mchName: undefined,
        mchNo: undefined,
        tagIdList: [],
      };

      this.mainQuery = Object.copy(this.mainQueryRaw);

      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;
      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
    },

    handleApprove (e) {
      this.handleReview(e, true);
    },

    handleReject (e) {
      this.handleReview(e, false);
    },

    handleReview (e, isApprove) {

      this.$confirm(`确定${isApprove ? '通过' : '驳回'}审核吗?`, {
        confirmButtonText: isApprove ? '通过审核' : '驳回审核',
        confirmButtonType: 'danger',
        type: 'warning',
      }).then(re => {

        this.loading = true;
        ApiMain.edit({
          id: e.row.id,
          reviewStatus: isApprove ? 1 : 2,
        }).then(() => {
          this.fetchMainData();
          this.$message({ message: '操作成功', type: 'success' });
        }).finally(() => {
          this.loading = false;
        });

      }).catch(err => {})

    },
  }
}
</script>

<style>
</style>
